<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>view事件的监听</title>
</head>
<body>
   <script src='/js/vue.js'></script>
   <div id='app'>
      <!-- 在前端开发在中，经常要做的事情，事件监听 ，经常要进行交互-->
      <!-- 比如单机、拖拽、键盘敲击、鼠标滑动等 -->
      <!-- 发生这个事情，与之进行一些逻辑的操作，需要事件监听，在vue实现通过v-on的指令 -->
      <p>{{counter}}</p>
      <button v-on:click="counter++">+</button>
      <button v-on:click="counter--">-</button>
      <!-- 
         绑定事件监听器 语法糖->简写 @
         可以定义为 function|inline statement|object
         参数为event
      -->
      <!-- v-on 指令用来绑定DOM事件监听 -->
      <!-- 函数没有参数时，可以省略（），且如果需要参数，默认为事情本身event -->
      <!-- 如果有参数，则不可省略，否则为undefined -->
      <p>--------------</p>
      <button @click="increase()">+</button>
      <button @click="decrease(12,$event)">-</button>


   </div>

   <script>
      let app = new Vue({
         el:'#app',
         data:{
            msg:'hello word',
            counter:0
         },
         methods:{
            increase:function(){
               this.counter++
            },
            decrease:function(){
               this.counter--
            },

            //可省略为
            // increase(){
            //    this.counter++
            // },
            // decrease(){
            //    this.counter--
            // },
            
            increase(a){
               this.counter++
            },
            decrease(abc,b){
               this.counter--
            },
         },

      })
   </script>
    
</body>
</html>